import { defineComponent, onMounted, reactive, ref, onBeforeUnmount, h, resolveComponent } from "vue";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import screenFull from 'screenfull';
import './demo.scss';
import { map_chart, map_mouseoverOrmouseout, left_chart01, center_chart01, right_chart01, right_chart02, right_chart03, headerData } from './demo.js';
import Chart from '@/components/chart.jsx'; // 图标组件
import MarketConditions from './marketConditions'; // 图标组件
import YearOfOpening from './yearOfOpening'; // 开业年份
import CountTo from '@/components/countTo/countTo.vue';
import httpRequest from '@/request/http.js';
export default defineComponent({
    components: {
        Plus: ElementPlusIconsVue['Plus'],
        SemiSelect: ElementPlusIconsVue['SemiSelect'],
        FullScreen: ElementPlusIconsVue['FullScreen']
    },
    setup(props) {
        // 动态数据
        const dynamicData = ref(false);
        // 大屏初始化
        const isFullScreen = ref(false);
        const screenFullInit = () => {
            if (screenFull.isEnabled) {
                screenFull.on('change', () => {
                    isFullScreen.value = screenFull.isFullscreen;
                });
            }
        }
        const timeValue = ref(5000);
        // 头部数据
        const header_date = reactive(headerData); // 头部数据配置
        const header_time = ref();
        const headerChangeValue_01 = () => {
            if (header_time.value) {
                clearInterval(header_time.value);
            }
            header_time.value = setInterval(() => {
                header_date.forEach(item => {
                    item.oldValue = Number(item.value);``
                    item.value = Number((Math.random() * 100).toFixed(0))
                })
            }, timeValue.value)
        }
        // 地图图表
        const queryChinaMapData = async () => {
            // let res = await httpRequest.get('/api?code=100000_full')
        }
        const map_ref = ref(); // 地图实例
        const map_chart_options = reactive({ options: {} }); // 地图配置

        const map_time = ref(); // 地图配置
        const mapChangeValue = () => {
            if (map_time.value) {
                clearInterval(map_time.value);
            }
            map_time.value = setInterval(() => {
                map_chart_options.options.series[0].data.forEach(item => {
                    item.data.HR = (10 + Math.random() * 90).toFixed(0)
                })
                map_chart_options.options.series[0].data = map_chart_options.options.series[0].data
                // map_ref.value.setOption(map_chart_options.options);
            }, timeValue.value)
        }
        // 左侧图表
        const left_01_ref = ref(); // 左侧图表实例
        const left_chart01_options = reactive(left_chart01); // 图标配置
        const left_01_time = ref();
        const leftChangeValue_01 = () => {
            if (left_01_time.value) {
                clearInterval(left_01_time.value);
            }
            left_01_time.value = setInterval(() => {
                left_chart01_options.series[0].data[0].value = (Math.random() * 100).toFixed(2);
                left_chart01_options.series[1].data[0].value = (Math.random() * 100).toFixed(2);
                left_01_ref.value.setOption(left_chart01_options);
            }, timeValue.value)
        }
        // 中间图标01
        const center_01_ref = ref(); // 左侧图表实例
        const center_chart01_options = reactive(center_chart01); // 图标配置
        const center_01_time = ref();
        const centerChangeValue_01 = () => {
            if (center_01_time.value) {
                clearInterval(center_01_time.value);
            }
            center_01_time.value = setInterval(() => {
                center_chart01_options.series[0].data = center_chart01_options.series[0].data.map(value => (200 + Math.random() * 300).toFixed(2))
                center_chart01_options.series[1].data = center_chart01_options.series[1].data.map(value => (100 + Math.random() * 200).toFixed(2))
                center_01_ref.value.setOption(center_chart01_options);
            }, timeValue.value)
        }
        // 中间表格02
        const center_table_data = reactive([
            { year: '2022', Good: 123, Fair: 7, Poor: 11, Trainwreck: 78, Unit: 102, HR: 27, IRR: 56 },
            { year: '2021', Good: 123, Fair: 7, Poor: 11, Trainwreck: 78, Unit: 56, HR: 14, IRR: 28 },
            { year: '2020', Good: 123, Fair: 7, Poor: 11, Trainwreck: 78, Unit: 19, HR: 6, IRR: 12 },
        ]); // 图标配置
        const center_02_time = ref();
        const centerChangeValue_02 = () => {
            if (center_02_time.value) {
                clearInterval(center_02_time.value);
            }
            center_02_time.value = setInterval(() => {
                center_table_data.forEach(item => {
                    item.Good = Number((Math.random() * 100).toFixed(0));
                    item.Fair = Number((Math.random() * 100).toFixed(0));
                    item.Poor = Number((Math.random() * 100).toFixed(0));
                    item.Trainwreck = Number((Math.random() * 100).toFixed(0));
                    item.Unit = Number((Math.random() * 100).toFixed(0));
                    item.HR = Number((Math.random() * 100).toFixed(0));
                    item.IRR = Number((Math.random() * 100).toFixed(0));
                })
            }, timeValue.value)
        }
        // 右侧图表01
        const right_01_ref = ref(); // 左侧图表实例
        const right_chart01_options = reactive(right_chart01); // 图标配置
        const right_01_time = ref();
        const rightChangeValue_01 = () => {
            if (right_01_time.value) {
                clearInterval(right_01_time.value);
            }
            right_01_time.value = setInterval(() => {
                right_chart01_options.series[0].data = right_chart01_options.series[0].data.map(value => (Math.random() * 500).toFixed(2))
                right_chart01_options.series[1].data = right_chart01_options.series[0].data.map(value => (Math.random() * 500).toFixed(2))
                right_01_ref.value.setOption(right_chart01_options);
            }, timeValue.value)
        }
        //  右侧图表02
        const right_02_ref = ref(); // 左侧图表实例
        const right_chart02_options = reactive(right_chart02); // 图标配置
        const right_02_time = ref();
        const rightChangeValue_02 = () => {
            if (right_02_time.value) {
                clearInterval(right_02_time.value);
            }
            right_02_time.value = setInterval(() => {
                right_chart02_options.series[0].data = right_chart02_options.series[0].data.map(value => (Math.random() * 500).toFixed(2))
                right_chart02_options.series[1].data = right_chart02_options.series[0].data.map(value => (Math.random() * 500).toFixed(2))
                right_02_ref.value.setOption(right_chart02_options);
            }, timeValue.value)
        }
        // 右侧图表03
        const right_03_ref = ref(); // 左侧图表实例
        const right_chart03_options = reactive(right_chart03); // 图标配置
        const right_03_time = ref();
        const rightChangeValue_03 = () => {
            if (right_03_time.value) {
                clearInterval(right_03_time.value);
            }
            right_03_time.value = setInterval(() => {
                right_chart03_options.series[0].data = right_chart03_options.series[0].data.map(value => (Math.random() * 500).toFixed(2))
                right_chart03_options.series[1].data = right_chart03_options.series[0].data.map(value => (Math.random() * 500).toFixed(2))
                right_03_ref.value.setOption(right_chart02_options);
            }, timeValue.value)
        }
        // 数据联动变化
        const dataChange = () => {
            headerChangeValue_01();
            mapChangeValue();
            leftChangeValue_01();
            centerChangeValue_01();
            centerChangeValue_02();
            rightChangeValue_01();
            rightChangeValue_02();
            rightChangeValue_03();
            dynamicData.value = true;
        }
        // 清空定时器
        const clearTimer = () => {
            header_time.value && clearInterval(header_time.value);
            map_time.value && clearInterval(map_time.value);
            left_01_time.value && clearInterval(left_01_time.value);
            center_01_time.value && clearInterval(center_01_time.value);
            center_02_time.value && clearInterval(center_02_time.value);
            right_01_time.value && clearInterval(right_01_time.value);
            right_02_time.value && clearInterval(right_02_time.value);
            right_03_time.value && clearInterval(right_03_time.value);
            dynamicData.value = false;
        }
        const mapBox = {
            map_ref,
            map_chart_options,
            screenFull,
            isFullScreen,
            dynamicData,
            dataChange,
            clearTimer
        };
        map_chart_options.options = map_chart.call(mapBox);
        // 监听f11按下
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 122) { // 按 Esc
                event.preventDefault();
            }
        };
        onMounted(() => {
            screenFullInit();
            queryChinaMapData();
            // dataChange();
        })
        onBeforeUnmount(() => {
            clearTimer();
        })
        return () => (
            <div className="demo-01">
                <div className="demo-01-map">
                    <Chart onRendered={(myChart) => {
                        myChart.on('mouseover', (params) => {
                            map_mouseoverOrmouseout(params, myChart, 'highlight');
                        })
                        myChart.on('mouseout', (params) => {
                            map_mouseoverOrmouseout(params, myChart, 'downplay');
                        })
                    }} ref={map_ref} chartOptions={map_chart_options.options}></Chart>
                </div>
                <div className="demo-01-box">
                    <div class={{ 'demo-01-box-header': true, isFullScreen: isFullScreen.value }}>
                        <div className="demo-01-box-header-box">
                            <p className="no-style">2022M6 新店财务成功率</p>
                            <p>追踪店的开业期为2017年</p>
                        </div>
                        {header_date.map(item => (
                            <div className="demo-01-box-header-box active">
                                <p class={['iconfont', item.icon]} style={{ border: '6px solid ' + item.color }}></p>
                                <p class="demo-01-box-header-box-value">
                                    <CountTo start={item.oldValue || 0} end={item.value} suffix="%" autoPlay={true} duration={3000} />
                                </p>
                            </div>
                        ))}
                    </div>
                    <div className="demo-01-box-body">
                        <div class={{ 'demo-01-box-body-left': true, isFullScreen: isFullScreen.value }}>
                            <div className="demo-01-box-body-left-box-01">
                                <div className="demo-01-box-body-left-box-01-chart">
                                    <Chart ref={left_01_ref} chartOptions={left_chart01_options}></Chart>
                                </div>
                                <div>
                                    <p>Vs上月: 新店财务成功率 +1ppt</p>
                                    <p>Vs上月: 内部投资报酬率 +1ppt</p>

                                </div>
                            </div>
                            <div className="demo-01-box-body-left-box-02">
                                <MarketConditions allData={map_chart_options.options.series[0].data} />
                            </div>
                        </div>
                        <div class={{ 'demo-01-box-body-center': true }}>
                            <div class={{ 'demo-01-box-body-center-box-02': true, isFullScreen: isFullScreen.value }}>
                                <div className="demo-01-box-body-center-box-02-box">
                                    <Chart ref={center_01_ref} chartOptions={center_chart01_options}></Chart>
                                </div>
                                <div className="demo-01-box-body-center-box-02-box">
                                    <YearOfOpening tableData={center_table_data} />
                                </div>
                            </div>
                        </div>
                        <div class={{ 'demo-01-box-body-right': true, isFullScreen: isFullScreen.value }}>
                            <div className="demo-01-box-body-right-box-01">
                                <Chart ref={right_01_ref} chartOptions={right_chart01_options}></Chart>
                            </div>
                            <div className="demo-01-box-body-right-box-02">
                                <Chart ref={right_02_ref} chartOptions={right_chart02_options}></Chart>
                            </div>
                            <div className="demo-01-box-body-right-box-03">
                                <Chart ref={right_03_ref} chartOptions={right_chart03_options}></Chart>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});